<template>
	<view class="Home bgcc">
		<tabbar></tabbar>
		<view class="bg-white">
			<view class="auto mx15 bor10 ovh">
				<view class="banner wp100 bor5">
					<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" indicator-active-color="#00B3FF" indicator-color="#fff">
						<swiper-item v-for="(item, index) in banlist" :key="index">
							<view class="swiper-item"><image :src="item.image" style="height: 300rpx;width: 100%;"></image></view>
						</swiper-item>
					</swiper>
				</view>
			</view>
			<view class="mx15 mb15 por h90">
				<swiper class="notic-banner fwb f12" :vertical="true" :autoplay="true" :circular="true" :interval="4000">
					<swiper-item @tap="actionDetail(item.id)"><view class="swiper-items ellipsis">有关盛大矿业上线imToken钱包公告通知…</view></swiper-item>
					<swiper-item @tap="actionDetail(item.id)"><view class="swiper-items ellipsis">有关盛大矿业上线imToken钱包公告通知…</view></swiper-item>
					<swiper-item @tap="actionDetail(item.id)"><view class="swiper-items ellipsis">有关盛大矿业上线imToken钱包公告通知…</view></swiper-item>
				</swiper>
				<view class="poa mune"><image src="../../static/home/mune.png" mode="" class="block block20"></image></view>
			</view>
		</view>
		<view class="flex bg-white my15 mx15 bor10 py15 px15 flex-align-center por">
			<view class=""><image src="../../static/home/news.png" mode="" class="block block30"></image></view>
			<view class="ml15">
				<text class="fwb f12">新手指南</text>
				<view class="fsb mt6">
					<text class="ash f11">在盛大矿业如何购买挖矿算力？</text>
					<image src="../../static/home/right.png" mode="" class="block block15"></image>
				</view>
			</view>
			<view class="poa over py2 px4 f10 white">关闭</view>
		</view>
		<view class="mx15">
			<view class="w776 flex ovh flex-align-start mr10">
				<view class="mb15 fsb mr10">
					<view class="flex flex-align-center bg-white bor10 py13 w224 px15">
						<image src="../../static/home/std.png" mode="" class="block block40"></image>
						<view class="ml5">
							<text class="fwb f12">STD</text>
							<text class="ash f11 block mt3">$124.01</text>
						</view>
					</view>
				</view>
				<view class="mr10 mb15 fsb">
					<view class="flex flex-align-center bg-white bor10 py13 w224 px15">
						<image src="../../static/home/eth.png" mode="" class="block block40"></image>
						<view class="ml5">
							<text class="fwb f12">ETH</text>
							<text class="ash f11 block mt3">$124.01</text>
						</view>
					</view>
				</view>
				<view class="mb15 fsb">
					<view class="flex flex-align-center bg-white bor10 py13 w224 px15">
						<image src="../../static/home/btc.png" mode="" class="block block40"></image>
						<view class="ml5">
							<text class="fwb f12">BTC</text>
							<text class="ash f11 block mt3">$124.01</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="flex"><view class="borders px10 mx15 mb15 fwb">推荐算力套餐</view></view>
		<view class="flex mb15 mx15">
			<view
				class="py7 px12 bor40 mr10 f12 block bg-white"
				v-for="(item, index) in TabArray"
				:key="index"
				:class="{ 'border-blue': TabIndex == index, fwb: TabIndex == index }"
				@click="Tab(index)"
			>
				<text>{{ item }}</text>
			</view>
		</view>
		<view class="pb20">
			<view class="bor10 mx15 px15 py15 bg-white my15" @click="pushPage('/pages/Home/content')">
				<view class="fsb">
					<view class="flex flex-justify-start">
						<text class="fwb f14">1 MHS盛大矿机</text>
						<text class="orange py3 px4 block ml5 f9">2021.01.24生效</text>
					</view>
					<view class="blues px10 flex f10 flex-justify-center flex-align-center">
						<image src="../../static/home/std.png" mode="" class="block block15"></image>
						<text class="blue f10 py6 ml3">挖STD</text>
					</view>
				</view>
				<view class="fsb mt16">
					<view class="wp60">
						<view class="f22 block fwb">$ 767.84</view>
						<view class="ash f11 mt8">算力单价</view>
						<view class="w340 h8 bgs mt19"><view class="bg-blue hp100" style="width: 20%;"></view></view>
						<view class="mt18 f11">
							<text class="ash">管理费：</text>
							<text>13%</text>
						</view>
					</view>
					<view class="wp40 f11">
						<view class="f11">
							<text class="ash">周期：</text>
							<text>24天</text>
						</view>
						<view class="mt14 f11">
							<text class="ash">年化收益率：</text>
							<text>247%</text>
						</view>
						<view class="mt18 f11 mt18">
							<text class="ash">已售</text>
							<text>45%</text>
						</view>
						<view class="mt18 f11 mt17">
							<text class="ash">电费：</text>
							<text>$0.21/T·天</text>
						</view>
					</view>
				</view>
			</view>
			<view class="bor10 mx15 px15 py15 bg-white my15" @click="pushPage('/pages/Home/content')">
				<view class="fsb">
					<view class="flex flex-justify-start">
						<text class="fwb f14">1 MHS盛大矿机</text>
						<text class="orange py3 px4 block ml5 f9">2021.01.24生效</text>
					</view>
					<view class="blues px10 flex f10 flex-justify-center flex-align-center">
						<image src="../../static/home/std.png" mode="" class="block block15"></image>
						<text class="blue f10 py6 ml3">挖STD</text>
					</view>
				</view>
				<view class="fsb mt16">
					<view class="wp60">
						<view class="f22 block fwb">$ 767.84</view>
						<view class="ash f11 mt8">算力单价</view>
						<view class="w340 h8 bgs mt19"><view class="bg-blue hp100" style="width: 20%;"></view></view>
						<view class="mt18 f11">
							<text class="ash">管理费：</text>
							<text>13%</text>
						</view>
					</view>
					<view class="wp40 f11">
						<view class="f11">
							<text class="ash">周期：</text>
							<text>24天</text>
						</view>
						<view class="mt14 f11">
							<text class="ash">年化收益率：</text>
							<text>247%</text>
						</view>
						<view class="mt18 f11 mt18">
							<text class="ash">已售</text>
							<text>45%</text>
						</view>
						<view class="mt18 f11 mt17">
							<text class="ash">电费：</text>
							<text>$0.21/T·天</text>
						</view>
					</view>
				</view>
			</view>
			<view class="bor10 mx15 px15 py15 bg-white my15" @click="pushPage('/pages/Home/content')">
				<view class="fsb">
					<view class="flex flex-justify-start">
						<text class="fwb f14">1 MHS盛大矿机</text>
						<text class="orange py3 px4 block ml5 f9">2021.01.24生效</text>
					</view>
					<view class="blues px10 flex f10 flex-justify-center flex-align-center">
						<image src="../../static/home/std.png" mode="" class="block block15"></image>
						<text class="blue f10 py6 ml3">挖STD</text>
					</view>
				</view>
				<view class="fsb mt16">
					<view class="wp60">
						<view class="f22 block fwb">$ 767.84</view>
						<view class="ash f11 mt8">算力单价</view>
						<view class="w340 h8 bgs mt19"><view class="bg-blue hp100" style="width: 20%;"></view></view>
						<view class="mt18 f11">
							<text class="ash">管理费：</text>
							<text>13%</text>
						</view>
					</view>
					<view class="wp40 f11">
						<view class="f11">
							<text class="ash">周期：</text>
							<text>24天</text>
						</view>
						<view class="mt14 f11">
							<text class="ash">年化收益率：</text>
							<text>247%</text>
						</view>
						<view class="mt18 f11 mt18">
							<text class="ash">已售</text>
							<text>45%</text>
						</view>
						<view class="mt18 f11 mt17">
							<text class="ash">电费：</text>
							<text>$0.21/T·天</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			banlist: [{ image: '../../static/home/banner-1.png' }, { image: '../../static/home/banner-2.png' }, { image: '../../static/home/banner-1.png' }],

			TabArray: ['STD矿机', 'ETH矿机', 'BTC矿机'],
			TabIndex: 0
		};
	},
	onShow() {},
	methods: {
		async getData() {
			let { data } = await this.$http.post('home.index', {}, { isAuth: false, tipConfig: { isLoading: false } });
			this.data = data;
		},

		Tab(index) {
			this.TabIndex = index;
		}
	}
};
</script>

<style lang="less">
.bgcc {
	width: 100%;

	min-height: 100vh;
	background: #f5f5f5;
}
.banner {
	height: 300rpx;
	image {
		width: 100%;
		height: 100%;
		display: block;
	}
}
/deep/ .uni-swiper {
	height: 10rpx;
}
/deep/ uni-swiper .uni-swiper-dot {
	width: 12rpx;
	height: 12rpx;
}
.h90 {
	height: 70rpx;
	line-height: 70rpx;
}
.swiper-items {
	height: 70rpx !important;
	width: 450rpx;
}
/deep/ .notic-banner {
	height: 70rpx;
}
.mune {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translate(0%, -50%);
}
.over {
	position: absolute;
	right: 0;
	top: 0;
	background-color: #999999;
	border-radius: 0 0 0 10rpx;
}
.w224 {
	min-width: 224rpx;
}
.w776 {
	width: 776rpx;
}
.ovh {
	overflow: auto;
}

.borders {
	border-left: 15rpx solid #308ae4;
}

.border-blue {
	border: 1rpx solid #308ae4;
	color: #308ae4;
}

.bor40 {
	border-radius: 40rpx;
}
.bgcs {
	background: #f5f5f5;
}
.orange {
	background: #fffbf8;
	border: 1rpx solid #ff9630;
	border-radius: 4rpx;
}
.blues {
	background: #f9faff;
	border: 1rpx solid #64abe1;
	border-radius: 4rpx;
}
.w340 {
	width: 340rpx;
}
.bgs {
	background: #e7e9eb;
}
</style>
